<template>
    <div style="padding: 0px; margin: 0px">
      <el-row style="background: #fff; height: 50px" class="pt-2 pb-2 pl-3 pr-3">
        <el-col :span="24">
          <div style="float: right; margin-top: 10px">
            <el-button type="primary" icon="el-icon-refresh" plain
              >批量修改角色</el-button
            >
          </div>
        </el-col>
      </el-row>
      <vxe-table
        ref="mytable"
        :height="heightY"
        :data="articlesData"
        style="width: 100%; margin-top: 10px"
        :row-config="{ useKey: true, keyField: 'roleId' }"
        border
        highlight-current-row
        :current-row-key="idSelected"
        @current-change="selectChange"
      >
        <vxe-column type="checkbox" width="40" />
        <vxe-column field="roleName" title="账号" sortable width="220" />
  
        <vxe-column field="description" title="用户名" />
        <vxe-column field="role" title="角色" />
        <vxe-column title="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              plain
              @click="handlClickrole(scope.row)"
              >修改角色</el-button
            >
          </template>
        </vxe-column>
      </vxe-table>
      <rolePop v-if="rolePopFlag" ref="rolePopRef"></rolePop>
    </div>
  </template>
  
  <script>
  import rolePop from "./rolePop.vue"
  export default {
    components:{rolePop},
    data() {
      return {
        articlesData: [
          {
            roleName: "张三",
            description: "zhangsan",
            role: "管理员",
          },
        ],
        heightY: window.innerHeight - 230 + "px",
        rolePopFlag:false,
      };
    },
    methods: {
      // 修改角色
      handlClickrole(row) {
        console.log(row, "row");
        this.rolePopFlag=true;
        this.$refs.rolePopRef.init(row);
      },
    },
  };
  </script>
  
  <style scoped>
  >>> .vxe-header--column .vxe-cell--title {
    font-size: 12px;
    font-weight: normal;
    color: #909399;
  }
  >>> .vxe-cell--label {
    font-size: 12px;
  }
  </style>
  